<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>食货志</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BS4依赖 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- json依赖 -->
    <script src="js/json2.js"></script>
    <style type="text/css">
        /* 三层div用于按比例缩放图片 */
        .demo {
            width: 100%;
            height: 300px;
            overflow: hidden;
        }
        .demo1-1 {
            float: left;
            width: 200px;
            height: 200px;
        }
        .zoomImage {
            width: 100%;
            height: 0;
            padding-top: 100%;
            overflow: hidden;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
        }

        /* div阴影显示 */
        .show-shadow:hover{
            -webkit-box-shadow: #666 0px 0px 10px;
            -moz-box-shadow: #666 0px 0px 10px;
            box-shadow: #666 0px 0px 10px;
        }

        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
    </style>

    <script>
        // 获取美食信息
        $.ajax({
            // 请求地址、请求方式、预期返回数据类型、成功回调函数
            url: "cateList", type: "post", dataType: "json",
            success: function (list) {
                var object = list;
                // append在内部添加元素
                for (var row in object) {
                    // TODO，只要前8条记录
                    // 取多少条数据应该放在服务端操作
                    if (row >= 8) {
                        break;
                    }
                    $("#container").append(
                        "<div class='col-md-3 rounded show-shadow demo'  style=\"background-color: #FFFFFF; height: auto\">" +
                        "<div class='demo1-1'><div class='zoomImage d-block w-100 rounded' style=\"background-image: url(" + object[row].cateImage + ")\"></div></div>" +
                        "<span style=\"padding-top: 6px; font-size: 14px; color: black;\">" + object[row].cateName + "</span><br>" +
                        "<span class='text-secondary' style=\"font-size: 12px;\">" + object[row].userName + "</span>" +
                        "</div>"
                    );
                }
            },
            // 失败回调函数
            error: function () {
                alert("系统出错!!")
            }
        });

    </script>
</head>

<body>
    <!-- 顶部导航 -->
    <div id="top" class="container-full"></div>
    <script>
        // TODO 加载顶部导航，位置放div下，否则无法加载
        $("#top").load("page-top.html");
    </script>

    <!-- 搜索栏 -->
    <div id="search" class="container mb-2"></div>
    <script>
        $("#search").load("main-search.html");
    </script>


    <!-- 轮播图 -->
    <div class="container">
        <div class="row">
            <div class="col-1"></div>
            <div class="col-10">
                <!-- 图片轮播 -->
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                        <li data-target="#demo" data-slide-to="2"></li>
                        <li data-target="#demo" data-slide-to="3"></li>
                        <li data-target="#demo" data-slide-to="4"></li>
                        <li data-target="#demo" data-slide-to="5"></li>
                    </ul>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="./images/carousel/2020041315867448189338197577.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/carousel/2020031915845832443168197577.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/carousel/2020022715827848201138197577.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/carousel/2020022515825959298008197577.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/carousel/2020031915845832443168197577.jpg">
                        </div>
                        <div class="carousel-item">
                            <img src="./images/carousel/2020022515825959298008197577.jpg">
                        </div>
                    </div>
                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <div class="col-1"></div>
        </div>

    </div>

    <!-- 推荐标题栏独占一行 -->
    <div class="container" style="padding-top: 10px; padding-bottom: 10px;">
        <div class="row">
            <div class="col-1"></div>
            <p class="h5"><strong style="margin-left: 14px;">美食推荐</strong></p>
        </div>
    </div>

    <!-- 菜肴列表，每行显示4个格子 -->
    <div class="container">
        <div class="row">
            <div class="col-1"></div>
            <div class="col-10">
                <div class="row" id="container"></div>
            </div>
            <div class="col-1"></div>
        </div>
    </div>

    <!-- 推荐标题栏独占一行 -->
    <div class="container" style="padding-top: 10px; padding-bottom: 10px;">
        <div class="row">
            <div class="col-1"></div>
            <p class="h5"><strong style="margin-left: 14px;"></strong></p>
        </div>
    </div>

    <!-- 底部导航 -->
    <div id="bottom"></div>
    <script>$("#bottom").load("page-bottom.html");</script>
</body>
</html>